<style scoped>
.search-operate-log {
  min-width: 1000px;
}
</style>
<!--  -->
<template>
  <div class="search-operate-log" v-loading="loading">
    <el-form :inline="true" :model="search" class="demo-form-inline" @submit.native.prevent>
      <el-form-item label="语点" style="margin-bottom: 8px;">
        <el-select v-model="search.languageId" placeholder="请选择" size="small" style="width:120px;">
          <el-option :label="'全部'" :value="-1"></el-option>
          <el-option v-for="item in languages" :key="item.languageId" :label="item.text" :value="item.languageId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作用户" style="margin-bottom: 8px;">
        <el-select v-model="search.userNames" placeholder="请选择" size="small" style="width:200px;">
          <el-option :label="'全部'" :value="''"></el-option>
          <el-option v-for="(item,index) in usernames" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="功能模块" style="margin-bottom: 8px;">
        <el-cascader v-model="model" :options="options" :clearable="true" size="small" @change="modelHandleChange"
          style="width:280px;">
        </el-cascader>
      </el-form-item>
      <br />
      <el-form-item label="操作内容">
        <el-input v-model="search.likeContent" placeholder="输入120个字符以内的操作内容" maxlength="120" size="small" style="width:480px;"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-select v-model="search.orderBy" placeholder="请选择" size="small" style="width:100px;">
          <el-option :label="'顺序'" :value="1"></el-option>
          <el-option :label="'倒序'" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="行数">
        <el-select v-model="search.pageSize" placeholder="请选择" size="small" style="width:100px;">
          <el-option v:label="'8'" :value="8"></el-option>
          <el-option v:label="'10'" :value="10"></el-option>
          <el-option v:label="'12'" :value="12"></el-option>
          <el-option v:label="'14'" :value="14"></el-option>
          <el-option v:label="'16'" :value="16"></el-option>
          <el-option v:label="'18'" :value="18"></el-option>
          <el-option v:label="'20'" :value="20"></el-option>
          <el-option v:label="'25'" :value="25"></el-option>
          <el-option v:label="'50'" :value="50"></el-option>
          <el-option v:label="'100'" :value="100"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item style="margin-left:12px;">
        <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
        <el-button type="success" @click="onReset" size="small">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    search: {
      type: Object
    },
    resetData: {
      type: Function
    },
    reset: {
      type: Function
    }
  },
  computed: {
    ...mapGetters([
      'alllanguage'
    ])
  },
  created () {
    // 获取到可查询的条件数据
    this.loading = true
    this.$post('/operatelog/searchoperate', null).then(response => {
      if (response) {
        if (response.modelConf && response.modelConf.length > 0) {
          this.options = response.modelConf.map(item => {
            let children = item.modelActions.map(ite => {
              return {
                value: ite.modelAction,
                label: ite.modelAction
              }
            })
            children.splice(0, 0, {
              value: '',
              label: '全部'
            })
            return {
              value: item.modelName,
              label: item.modelName,
              children: children
            }
          })
          this.options.splice(0, 0, {
            value: '',
            label: '全部'
          })
        } else {
          this.options = []
        }
        if (response.languageIds && response.languageIds.length > 0) {
          this.languages = response.languageIds.map(item => {
            let lan = this.alllanguage.find(ele => {
              return parseInt(ele.id) === parseInt(item)
            })
            if (!lan) {
              return {
                languageId: -2,
                text: '未知ID：' + item
              }
            }
            return {
              languageId: lan.id,
              text: lan.name
            }
          })
        } else {
          this.languages = []
        }
        if (response.userNames && response.userNames.length > 0) {
          this.usernames = response.userNames
        } else {
          this.usernames = []
        }
      } else {
        this.options = []
        this.languages = []
        this.usernames = []
      }
    }).then(() => {
      this.loading = false
    })
  },
  data () {
    return {
      loading: true,
      model: [''],
      options: [],
      languages: [],
      usernames: []
    }
  },
  methods: {
    onSubmit () {
      let opbj = { page: 1 }
      if (this.model.length === 2) {
        opbj.modelName = this.model[0]
        opbj.modelAction = this.model[1]
      } else {
        opbj.modelName = null
        opbj.modelAction = null
      }
      this.resetData(opbj)
    },
    onReset () {
      this.reset()
      this.model = ['']
      this.$nextTick(() => {
        this.onSubmit()
      })
    },
    modelHandleChange () {
    }
  }
}

</script>
